<template>
  <div class="father">
    <h3>父组件</h3>
    <h3>父组件的蛋糕: {{ cake }}</h3>
    <h4>大孩子的给的玩具: {{ toy }}</h4>
    <h4>小孩子给的电脑: {{ computer }}</h4>
    <button @click="emitter.emit('send-cake-tochild1', cake)">父组件给蛋糕给孩子1</button>
    <button @click="emitter.emit('send-cake-tochild2', cake)">父组件给蛋糕给孩子2</button>
    <ChildDemo1 />
    <ChildDemo2 />
  </div>
</template>
<script lang="ts" setup name="Father">
import ChildDemo1 from "./ChildDemo1.vue";
import ChildDemo2 from "./ChildDemo2.vue";
import { useFather } from '@/hooks/use04emittTs';//ts代码实现,实现代码的拆分
import emitter from '@/utils/emitter';
const { cake, toy, computer, FatherbindEvents } = useFather();
// 在挂载时绑定事件
FatherbindEvents();
</script>
<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}

.father button {
  margin-left: 5px;
}
</style>